<template>
    <div class="header">
      <div class="header-left">
        <img id="logo" src="../assets/logo.png" alt="logo">
        <span @click="toIndex">进销存</span>
      </div>
      <div class="header-right">
        <div class="point"><i class="el-icon-search"></i></div>
        <div class="point" @click="getMsg()">
          <i class="el-icon-bell"></i>
          <span v-if="unreadCount > 0" class="unread-count">{{ unreadCount }}</span>
        </div>
        <div class="point welcome"><span>欢迎您,xxx</span></div>
      </div>
      <el-dialog :visible.sync="isMessagePopupVisible" title="消息通知" width="30%" style="float:right;">
        <div class="message-container">
          <el-table :data="messages.list" style="width: 100%" border stripe :header-cell-style="{ background: '#fafafa' }">
            <el-table-column align="center" label="序号" width="60px">
              <template slot-scope="scope">
                {{ scope.$index + 1 + (messages.pageNum - 1) * messages.pageSize }}
              </template>
            </el-table-column>
            <el-table-column prop="title" label="标题" align="center" width="200px">
              <template slot-scope="scope">
                <MsgView :data="scope.row" @click-updList="page(1,pageSize)" @click-updCount="getUReadCount()"/>
              </template>
            </el-table-column>
            <el-table-column prop="createStr" label="通知时间" align="center" width="200px"></el-table-column>
          </el-table>
            <el-pagination background layout="total,prev, pager, next, jumper" :total="messages.total" :page-size="messages.pageSize"
              :current-page="messages.currentPage" @current-change="handleCurrentChange"></el-pagination>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="closePopup">取 消</el-button>
          <el-button type="primary" @click="closePopup">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import MsgView from "./MsgView.vue"
  export default {
    name: "HeaderComponent",
    components:{MsgView},
    data() {
      return {
        unreadCount: 0, // 初始未读消息数量
        isMessagePopupVisible: false, // 消息框是否显示
        currentPage: 1,
        pageSize: 3,
        messages: {}
      };
    },
    methods: {
      toIndex() {
        this.$router.forward("/");
      },
      page(pageNo, pageSize) {
        this.$http.post("http://localhost:8081/finerMsg/getMsg", {
          userId: 1,
          pageNo: pageNo,
          pageSize: pageSize
        }).then((res) => {
          this.messages = res.data.data;
        });
      },
      getMsg(){
        this.isMessagePopupVisible=true;
        this.page(1,this.pageSize);
      },
      closePopup() {
        this.isMessagePopupVisible = false;
      },
      handleCurrentChange(currentPage) {
      this.messages.currentPage = currentPage;
      this.page(currentPage, this.messages.pageSize);
    },
      getUReadCount() {
        this.$http.post("http://localhost:8081/finerMsg/getUReadCount", {
          userId: 1
        }).then((res) => {
          this.unreadCount = res.data.data;
        });
      }
    },
    mounted() {
      this.getUReadCount();
    }
  };
  </script>
  
  <style>
  #logo {
    width: 60px;
    height: 60px;
  }
  
  .header {
    display: flex;
    background-color: #0090ff;
    color: #fffffc;
    line-height: 60px;
    justify-content: space-between;
  }
  
  .header-left {
    display: flex;
    font-weight: 700;
    font-size: 20px;
  }
  
  .header-right {
    display: flex;
    margin-right: 30px;
  }
  
  .header-right > div {
    margin: 0 5px;
  }
  
  .point {
    position: relative;
    width: 60px;
    height: 60px;
    cursor: pointer;
  }
  
  .header-right > .welcome {
    width: 150px;
  }
  
  .point:hover {
    background-color: #48b2ff;
  }
  
  .unread-count {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: red;
    color: white;
    border-radius: 50%;
    padding: 2px 6px;
    font-size: 12px;
    line-height: 1;
  }
  
  .message-container {
    float: right;
    width: 100%;
  }
  
  .message-item {
    cursor: pointer;
    padding: 10px;
    border: 1px solid #ebebeb;
    border-radius: 4px;
    transition: background-color 0.3s;
  }
  
  .message-item.unread {
    background-color: #f0f9eb;
  }
  
  .message-item:hover {
    background-color: #f5f7fa;
  }
  
  .el-timeline-item {
    margin-bottom: 10px;
  }
  </style>